<!-- 饼状图组件 -->
<!--
   pizzaId:传递id
   pizzaWidth:传递高度
   pizzaHeight:传递宽度
   pizzaList:传递饼状图数组
   pizzaListLength:传递饼状图数组长度
   pizzaTitle:传递饼状图标题   
-->

<template>
    <div class="pizza">
        <div class="pizza">
            <div
                :id="pizzaId"
                :style="[{ width: pizzaWidth }, { height: pizzaHeight }]"
            ></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        // 传递id
        pizzaId: {
            type: [String],
            default: '',
        },
        // 传递高度
        pizzaWidth: {
            type: [String, Number],
            default: '',
        },
        // 传递宽度
        pizzaHeight: {
            type: [String, Number],
            default: '',
        },
        // 传递饼状图数组
        pizzaList: {
            type: [Array],
            default() {
                return [];
            },
        },
        // 传递饼状图数组长度
        pizzaListLength: {
            type: [String, Number],
            default: '',
        },
        // 传递饼状图标题
        pizzaTitle: {
            type: [String],
            default: '',
        },
    },
    watch: {
        pizzaList() {
            this.drawPizza();
        },
        pizzaListLength() {
            this.drawPizza();
        },
        pizzaTitle() {
            this.drawPizza();
        },
    },
    data() {
        return {};
    },
    methods: {
        drawPizza() {
            // 基于准备好的dom，初始化echarts实例
            let chartDom = document.getElementById(this.pizzaId);
            let myChart = echarts.init(chartDom);
            var color = [
                ' #33aaff',
                '#94ebff',
                '#404DFF',
                '#E47CFF',
                '#3ED581',
                '#8367FF',
            ];

            var title = '';
            var legend = [];

            var seriesData = this.pizzaList;

            var option = {
                backgroundColor: '#252d4c',
                color: color,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#3240FF',
                    },
                },
                grid: {
                    top: '15%',
                    left: 0,
                    right: '1%',
                    bottom: 5,
                    containLabel: true,
                },
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    right: 50,
                    textStyle: {
                        align: 'left',
                        verticalAlign: 'middle',
                        rich: {
                            name: {
                                color: 'rgba(255,255,255,0.5)',
                                fontSize: 10,
                            },
                            value: {
                                color: 'rgba(255,255,255,0.5)',
                                fontSize: 10,
                            },
                            rate: {
                                color: 'rgba(255,255,255,0.9)',
                                fontSize: 10,
                            },
                        },
                    },
                    data: legend,
                    formatter: (name) => {
                        if (seriesData.length) {
                            const item = seriesData.filter(
                                (item) => item.name === name,
                            )[0];
                            return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
                        }
                    },
                },
                series: [
                    {
                        name: this.pizzaTitle + '占比',
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['45%', '65%'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                formatter: this.pizzaTitle,
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '18',
                                    color: '#fff',
                                },
                            },
                        },
                        labelLine: {
                            show: false,
                            length: 0,
                            length2: 0,
                        },
                        data: seriesData,
                    },
                    {
                        itemStyle: {
                            normal: {
                                color: '#32395E',
                            },
                        },
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['35%', '75%'],
                        center: ['50%', '50%'],
                        label: {
                            normal: {
                                // 去掉文字
                                show: false,
                                position: 'center',
                            },
                        },
                        // 去掉标示线
                        labelLine: {
                            show: false,
                        },
                        // 设置触点不触发弹窗
                        data: [{ value: 0, tooltip: { trigger: 'none' } }],
                        z: -10,
                    },
                ],
            };

            myChart.setOption(option);

            getDefaultSelected(myChart);

            function getDefaultSelected(myChart) {
                let index = 0;
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: 0,
                });
                myChart.on('mouseover', (e) => {
                    if (e.dataIndex !== index) {
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: index,
                        });
                    }
                });
                myChart.on('mouseout', (e) => {
                    index = e.dataIndex;
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: e.dataIndex,
                    });
                });
            }
        },
    },
    mounted() {
        this.drawPizza();
    },
};
</script>
